<template>
	<view>
		<headerTar title="附近设备" />
		<view class="top">
			<u-input v-model="value" placeholder="请输入搜索的充电桩" height="20rpx" clearable="true" class="input" />
			<view class="t_txt">
				搜索
			</view>
		</view>
		<view <view class="bg">
			<view class="centent">
				<view class="c_box" v-for="(item,i) in tableData" :key="i"
					:class="{'b_box_hui':isHui(item.online,item.deviceStatus)}" @click="goScanCodeDetail(item)">
					<view class="c_txt1">{{item.deviceName}}</view>
					<view class="c_txt2">{{item.address}}</view>
					<view class="c_txt3">
						<view class="c_tip">闲</view> 空闲 <text>{{item.idlePortNum}}</text>个插座 |
						共<text>{{item.portNum}}</text>个插座
					</view>
					<view class="go" @click="goMap">
						距您{{handleDistance(item.distance)}}
					</view>
					<view class="goScanCode" @click.stop="go(item)">
						<img class="img" src="/static/index/daohang.png" alt="" />导航
					</view>
					<view class="hui" v-if="isHui(item.online,item.deviceStatus)">
						<view class="hui_t1">
							维护中
						</view>
						<view class="hui_t2">
							不可使用
						</view>
					</view>
				</view>
			</view>
			<view class="wrap" v-if="showTips">
				<u-loadmore :status="status" />
			</view>
			<view class="noData" v-if="tableData.length==0">
				附近暂无可用电桩~
			</view>
		</view>
		<view class="map" @click="goMap">
			<img class="m_img" src="/static/map/location.png" alt="">
		</view>
	</view>
</template>

<script>
	import headerTar from '@/components/headerTar/header'
	import {
		nearbyDeviceApi
	} from '@/api/map.js'
	export default {
		components: {
			headerTar
		},
		data() {
			return {
				longitude: '',
				latitude: '',
				value: '',
				type: 'text',
				border: 'true',
				tableData: [],
				status: "loadmore",
				showTips: false, //底部提示
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
				},
			}
		},
		onLoad() {
			this.getDWei()
		},
		onReachBottom() {
			if (this.queryParams.total < 4) return;
			this.status = "loading";
			this.showTips = true
			this.queryParams.pageNum = ++this.queryParams.pageNum;
			if (this.queryParams.total < 10) {
				this.tableData.length < 4 ?
					(this.showTips =
						false) :
					(this.status =
						"nomore");
				return;
			}
			this.getDWei();
		},
		methods: {
			goScanCodeDetail(v) {
				!this.isHui(v.online, v.deviceStatus) && uni.navigateTo({
					url: '/pages/scanCodeDetail/scanCodeDetail?deviceId=' + JSON.stringify(v)
				});
			},
			goMap() {
				uni.redirectTo({
					url: '/pages/map/map'
				});
			},
			isHui(val, val2) {
				let str = true;
				if (val == 1 && val2 == 1) {
					str = false
				} else {
					str = true
				}
				return str
			},
			handleDistance(val) {
				let str = ''
				val > 1000 ? (str = (val / 1000).toFixed(2) + 'km') : str = (val + 'm')
				return str
			},
			go(v) {
				!this.isHui(v.online, v.deviceStatus) && uni.openLocation({
					latitude: v.latitude,
					longitude: v.longitude,
					name: v.deviceName,
					address: v.address,
					scale: 18
				});
			},
			getDWei() {
				let that = this
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.userLocation']) {
							console.log("没有权限");
							//拉取授权窗口
							uni.authorize({
								scope: "scope.userLocation",
								success: () => {
									uni.getLocation({
										type: 'gcj02',
										success: function(res) {
											console.log('当前位置的经度：' + res.longitude);
											console.log('当前位置的纬度：' + res.latitude);
											//获取附近电桩
											nearbyDeviceApi({
												pageSize: that.queryParams
													.pageSize,
												pageNum: that.queryParams
													.pageNum,
												longitude: res.longitude,
												latitude: res.latitude
											}).then(v => {
												that.tableData = [...that
													.tableData, ...v.rows
												];
												that.queryParams.total = v
													.total;
												console.log(that.tableData);
												if (that.queryParams
													.pageSize >= v.total) {
													that.tableData.length < 3 ?
														(that.showTips =
															false) :
														(that.status =
															"nomore");
												} else {
													that.status = "loadmore";
												}
											})
										}
									});
								},
								fail: (err) => {
									uni.showModal({
										title: '提示',
										content: '若点击不授权，将无法使用位置功能',
										cancelText: '不授权',
										cancelColor: '#999',
										confirmText: '授权',
										confirmColor: '#f94218',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success: (res) => {
														console.log(res
															.authSetting
														);
													}
												})
											} else if (res.cancel) {
												console.log("用户点击不授权");
											}
										}
									})
								}
							})
						} else {
							//有权限直接获取
							uni.getLocation({
								type: 'gcj02',
								success: (res) => {
									console.log("获取当前位置的接口", res);
									console.log('当前位置的经度：' + res.longitude);
									console.log('当前位置的纬度：' + res.latitude);
									that.latitude = res.latitude
									that.longitude = res.longitude
									//获取附近电桩
									nearbyDeviceApi({
										pageSize: that.queryParams.pageSize,
										pageNum: that.queryParams.pageNum,
										longitude: res.longitude,
										latitude: res.latitude
									}).then(v => {
										that.tableData = [...that
											.tableData, ...v.rows
										];
										that.queryParams.total = v
											.total;
										console.log(that.tableData);
										if (that.queryParams
											.pageSize >= v.total) {
											that.tableData.length < 3 ?
												(that.showTips =
													false) :
												(that.status =
													"nomore");
										} else {
											that.status = "loadmore";
										}
									})
								}
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.noData {
		width: 100vw;
		margin: 20rpx 30rpx;
		margin-top: 70rpx;
		text-align: center;
		color: #8f8f94;
	}

	.top {
		display: flex;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;

		.wrap {
			padding: 14rpx;
		}



		.input {
			height: 35rpx;
			border-radius: 35rpx;
		}

		.t_txt {
			font-size: 32rpx;
			margin-left: 20rpx;
		}
	}

	.bg {
		width: 100%;
		height: 80vh;
		background-color: #f7f7f7;
	}



	.centent {
		width: 100%;
		background-color: #f7f7f7;
		box-sizing: border-box;
		overflow: hidden;

		.c_box {
			position: relative;
			height: 180rpx;
			margin: 30rpx;
			padding: 30rpx;
			border-radius: 20rpx;
			border: 2rpx solid #e5e5e5;
			background-color: #fff;

			.c_txt1 {
				width: 435rpx;
				font-size: 34rpx;
				font-weight: bold;
			}

			.c_txt2 {
				width: 435rpx;
				margin: 24rpx 0;
				font-size: 26rpx;
			}

			.c_txt3 {
				font-size: 24rpx;
				color: #7bdbaa;
			}

			.c_tip {
				display: inline-block;
				padding: 6rpx;
				margin-right: 16rpx;
				font-size: 24rpx;
				color: #fff;
				border-radius: 10rpx;
				background-color: #30bf62;
			}

			.go {
				position: absolute;
				right: 40rpx;
				top: 30rpx;
				padding: 5rpx 10rpx;
				font-weight: 500;
				font-size: 28rpx;
				border-radius: 20rpx;
				// border: 2rpx solid #e5e5e5;
			}

			.hui {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -60rpx;
				margin-top: -75rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 150rpx;
				height: 150rpx;
				border-radius: 75rpx;
				background-color: #6a6b6c;
				opacity: 0.7;

				.hui_t1 {
					color: #efefef;
					font-size: 36rpx;
				}

				.hui_t2 {
					color: #dfdfdf;
					font-size: 24rpx;
				}
			}

			.goScanCode {
				position: absolute;
				right: 40rpx;
				bottom: 34rpx;
				width: 160rpx;
				height: 46rpx;
				line-height: 46rpx;
				font-size: 28rpx;
				text-align: center;
				border-radius: 50rpx;
				color: #30bf62;
				border: 2rpx solid #30bf62;

				.img {
					// margin-left: 10rpx;
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
					margin-top: -6rpx;
				}
			}
		}

		.b_box_hui {
			opacity: 1;
			background-color: #bcbcbc;
		}
	}

	.map {
		position: fixed;
		right: 20rpx;
		top: 50%;
		margin-top: -60rpx;
		padding: 5rpx;
		border: 2px solid #f7f7f7;
		border-radius: 20rpx;
		background-color: #fff;

		.m_img {
			width: 60rpx;
			height: 60rpx;
		}
	}
</style>